<template>
    <div>
        <canvas @click ='changeImgCode' ref= "canvasRef" :width=" props.width" :hight="props.height"></canvas>
    </div>
</template>

<script setup>
import { onMounted, reactive ,ref,defineExpose,toRef} from 'vue';

const props = defineProps({
    width: {
        type: Number,
        default: 120
    },
    height: {
        type: Number,
        default: 40
    },
    length: {
        type: Number,
        default: 4
    },
})
const state = reactive({
    pool:'abcdefghijklmnopqrstuvwxyz0123456789',
    imgcode:''
})

onMounted(() => {
    state.imgcode = createImgCode();
})

// 生成验证码
const canvasRef = ref(null);
const createImgCode = () => {
    //获取画布
    const ctx = canvasRef.value.getContext('2d');
    //填充色
    ctx.fillStyle = randomColor(180,240);
    //填充位置
    ctx.fillRect(0,0,props.width,props.height);
    //填充文字
    let imgCode = '';
    let length = props.length;
    for(let i = 0; i < length; i++){
        const text = state.pool[randomNum(0,state.pool.length)];
        imgCode += text
        const fontSize = randomNum(18,40);
        const deg = randomNum(-45,45);
        //绘制文字
        ctx.font = `${fontSize}px Simhei`
        ctx.textBaseline = 'top'
        //填充文字颜色
        ctx.fillStyle = randomColor(80,160)
        ctx.save()
        ctx.translate(35 * i + 10,15)   //平移
        ctx.rotate(deg * Math.PI / 180)   //旋转
        ctx.fillText(text,-10,-15)
        ctx.restore()
    }
    //绘制干扰线
    for(let i = 0; i < length; i++){
        ctx.beginPath()
        ctx.moveTo(randomNum(0,props.width),randomNum(0,props.height))
        ctx.lineTo(randomNum(0,props.width),randomNum(0,props.height))
        ctx.strokeStyle = randomColor(180,240)
        ctx.closePath()
        ctx.stroke()  //保存
    }
    //绘制干扰点
    for(let i = 0; i < 40; i++){
        ctx.beginPath()
        ctx.arc(randomNum(0,props.width),randomNum(0,props.height),1,0,2 * Math.PI)  //画圆
        ctx.fillStyle = randomColor(150,240)
        ctx.closePath()
        ctx.fill()
    }

    return imgCode;
}
const randomNum = (min,max) => {
    return parseInt(Math.random() * (max - min) + min)
}
const randomColor = (min,max) => {
    const r = randomNum(min,max)
    const g = randomNum(min,max)
    const b = randomNum(min,max)
    return `rgb(${r},${g},${b})`
}

const changeImgCode = () => {
    state.imgcode = createImgCode();
}

// 暴露给父组件
// defineExpose({
//     verifyCode: state,
// })

const verifyCode = toRef(state, 'imgcode')
defineExpose({
  verifyCode: verifyCode
})

</script>

<style lang="less" scoped>

</style>